<template>
  <div class="run-modal-style PostSelectUser-page" style="height:330px">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="userFormSearch"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <!-- 所属应用  -->
        <Form-item prop :label="$t('module.post.appId')">
          <Select
            v-model="searchForm.appId"
            @on-change="search()"
            :disabled="!!(productId && tenantCode)"
            style="width:160px"
            
          >
            <Option v-for="app in appList" :value="app.clientId" :key="app.clientId">{{app.appName}}</Option>
          </Select>
        </Form-item>
        <!-- 用户名 -->
        <Form-item prop="username" :label="$t('module.userManage.account')">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="searchForm.username"
            :placeholder="$t('module.post.warning.enterUserAccount')"
            
            @on-enter="search"
          ></Input>
        </Form-item>

        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">  
          <RPButton optType="search" @click="search" />
          <RPButton optType="reset" @click="reset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="userTable" :config="tableConfig">
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="search" />
        <RPButton optType="reset" @click="reset" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import { getPostAllUser } from "@/api/postApi.js";
import { getApplicationByProductCodeAndTenantCode } from "@/api/applicationApi.js";
import locales from "./locales.js";
import { postSelectUserColumns } from "./columns.js";

export default {
  name: "postselectuser",
  mixins: [locales],
  props: {
    productId: {
      type: String,
      default() {
        return "";
      }
    },
    appId: {
      type: String,
      default() {
        return "";
      }
    },
    tenantCode: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      searchForm: {
        appId: "",
        name: "",
        username: ""
      },
      appList: []
    };
  },
  computed: {
    tableConfig() {
      const { appId } = this;
      return {
        loadDataFn: ({ responseProcess, param }) => {
          getPostAllUser(param).then(res => responseProcess(res.data));
        },
        autoFirst: false,
        columnsFn: postSelectUserColumns.bind(this),
        initParam: { appId }
      };
    }
  },
  created: function() {
    this.initApp();
    this.$emit("SetTitle", this.$t("module.post.selectUser"));
    this.$emit("SetPageWidth", 850);
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.confirm"),
        theme: "primary",
        handle: () => {
          this.confirm();
        }
      },
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  methods: {
    // 初始化应用
    initApp() {
      let params = {
        productCode: this.productId,
        tenantCode: this.tenantCode
      };

      getApplicationByProductCodeAndTenantCode(params).then(res => {
        this.appList = res.data;
        // 有应用时
        if (this.appId && this.appId != "") {
          this.searchForm.appId = this.appId;
        } else {
          if (this.appList && this.appList.length > 0) {
            this.searchForm.appId = this.appList[0].clientId;
          }
        }
        this.search();
      });
    },
    search(page) {
      this.$refs["userTable"].load(this.searchForm, page);
    },
    reset() {
      this.$refs["userFormSearch"].resetFields();
      this.search(1);
    },
    confirm() {
      let selectedUser = this.$refs["userTable"].getSelectioned();
      this.$emit("Close", selectedUser);
    },
    onAppChange(appId) {
      this.searchForm.appId = appId;
      this.search();
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
// ok统一注释的样式
// .PostSelectUser-page {
//   .run-search-bar>div:last-child {
//     margin-top: 10px!important;
//   }
// }
</style>